<template>
  <a-modal
    :title="`店员${model?'编辑':'新增'}`"
    :width="700"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-form-item label="门店类型">
          <a-select v-decorator="['type']" placeholder="请选择门店类型">
            <a-select-option :key="key" :value="key" v-for="(item,key) in storeTypeList">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="店员名称">
          <a-input v-decorator="['name']" placeholder="请填写店员名称"></a-input>
        </a-form-item>
        <a-form-item label="手机号">
          <a-input v-decorator="['mobile']" placeholder="请填写手机号"></a-input>
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-decorator="['password']" placeholder="请填写密码"></a-input>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { clerkEdit, clerkAdd } from '@/api/store'
import { STORE_TYPE_MAP } from '@/mixins/storeType'
import formModalMixin from '@/mixins/formModalMixin'
// 表单字段
const fields = [ 'id', 'type', 'name', 'mobile', 'password' ]

export default {
  mixins: [formModalMixin],
  props: {
    type: {
      type: String,
      default: 'clothes'
    }
  },
  data () {
    this.fields = fields
    this.editAction = clerkEdit
    this.addAction = clerkAdd
    return {
      storeTypeList: STORE_TYPE_MAP
    }
  },
  methods: {
    handleOkBefore (values) {
      return { ...values, type: this.type }
    }
  }
}
</script>
